<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mapael Unit Testing</title>
    <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.4.0.css">

    <style type="text/css">
        body {
            color: #5d5d5d;
            font-family: Helvetica, Arial, sans-serif;
        }

        h1 {
            font-size: 30px;
            margin: auto;
            margin-top: 50px;
        }

        .container {
            max-width: 800px;
            margin: auto;
        }
    </style>

    <script src="https://code.jquery.com/qunit/qunit-2.4.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.min.js" charset="utf-8"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>

    <script src="../js/jquery.mapael.js" charset="utf-8"></script>
    <script src="../js/maps/france_departments.js" charset="utf-8"></script>
    <script src="../js/maps/world_countries.js" charset="utf-8"></script>
    <script src="../js/maps/usa_states.js" charset="utf-8"></script>

    <script src="const.js" charset="utf-8"></script>
    <script src="test-basic.js" charset="utf-8"></script>
    <script src="test-options.js" charset="utf-8"></script>
    <script src="test-areas.js" charset="utf-8"></script>
    <script src="test-plots.js" charset="utf-8"></script>
    <script src="test-range.js" charset="utf-8"></script>

</head>

<body>
    <div id="qunit"></div>
    <div id="qunit-fixture">
        <div class="container">
            <div class="mapcontainer">
                <div class="map">
                    <span>Alternative content for the map</span>
                </div>
                <div class="areaLegend">
                    <span>Alternative content for the legend</span>
                </div>
                <div class="plotLegend">
                    <span>Alternative content for the legend</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
